import React, { PureComponent } from 'react';
import { Rnd } from 'react-rnd';

import styles from './index.less';

class BaseNode extends PureComponent {
  constructor(props) {
    super();
    const { size, position } = props;
    this.state = { ...size, x: position.left, y: position.top };
  }

  render() {
    const { width, height, x, y } = this.state;
    const { children, onNodeClick } = this.props;
    return (
      <div onClick={onNodeClick}>
        <Rnd
          className={styles.node}
          size={{ width, height }}
          position={{ x, y }}
          onDragStop={(e, d) => {
            this.setState({ x: d.x, y: d.y });
          }}
          onResize={(e, direction, ref, delta, position) => {
            this.setState({
              width: ref.style.width,
              height: ref.style.height,
              ...position,
            });
          }}
        >
          {children}
        </Rnd>
      </div>
    );
  }
}

export default BaseNode;
